"use client";

import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import easyFetch from "@/client/api/easyfetch";
import { useRouter } from "next/navigation";
import Link from "next/link";
import useMeStore from "@/client/store/me";
import ForAuth from "./for-auth";
import { cn } from "@/lib/utils";

export default function RightProfileDropdown() {
  const router = useRouter();
  const { reloadMe, auth, loading } = useMeStore((state) => state);
  const logout = () => {
    (async () => {
      const result = await easyFetch.post("/api/logout", {});
      if (result.ok) {
        await reloadMe();
        router.refresh();
      } else {
        alert(result.message);
      }
    })();
  };

  return (
    <ForAuth when="authed">
      <Menu as="div" className="relative ml-3">
        <div>
          <Menu.Button className="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
            <span className="absolute -inset-1.5" />
            <span className="sr-only">Open user menu</span>
            <picture>
              <img
                className="h-8 w-8 rounded-full"
                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
              />
            </picture>
          </Menu.Button>
        </div>
        <Transition
          as={Fragment}
          enter="transition ease-out duration-100"
          enterFrom="transform opacity-0 scale-95"
          enterTo="transform opacity-100 scale-100"
          leave="transition ease-in duration-75"
          leaveFrom="transform opacity-100 scale-100"
          leaveTo="transform opacity-0 scale-95"
        >
          <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
            <Menu.Item>
              {({ active }) => (
                <Link
                  href="/me"
                  className={cn(active ? "bg-gray-100" : "", "block px-4 py-2 text-sm text-gray-700")}
                >
                  Profile
                </Link>
              )}
            </Menu.Item>
            <Menu.Item>
              {({ active }) => (
                <Link
                  href="/me/settings"
                  className={cn(active ? "bg-gray-100" : "", "block px-4 py-2 text-sm text-gray-700")}
                >
                  Settings
                </Link>
              )}
            </Menu.Item>
            <Menu.Item>
              {({ active }) => (
                <button
                  onClick={logout}
                  className={cn(
                    active ? "bg-gray-100" : "",
                    "block w-full text-left px-4 py-2 text-sm text-gray-700",
                  )}
                >
                  Logout
                </button>
              )}
            </Menu.Item>
          </Menu.Items>
        </Transition>
      </Menu>
    </ForAuth>
  );
}
